<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单的隐藏与显示</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $("h3").click(function(){
                let u = this.nextSibling.nextSibling;
                if($(u).css("display") == "none"){
                    // 将所有ul隐藏
                    $("ul").hide();
                    // 将当前ul显示
                    $(u).show();
                    return;
                }
                $("ul").hide();
                // $(u).hide();
            });
        })
    </script>
</head>
<body>
<!--
    三个列表中同一时间最多只有一个列表允许展开,可以全部隐藏
    当点击某一个列表时,如果该列表是隐藏的,则展开该列表,隐藏其他列表
    如果该列表是展开的,则隐藏该列表
-->
<h3>家用电器</h3>
<ul id="u1" style="display: none;">
    <li>电视</li>
    <li>冰箱</li>
    <li>空调</li>
    <li>洗衣机</li>
</ul>
<h3>电子产品</h3>
<ul id="u2" style="display: block;">
    <li>手机</li>
    <li>pad</li>
    <li>电子表</li>
</ul>
<h3>学习用品</h3>
<ul id="u3" style="display: none;">
    <li>笔记本</li>
    <li>签字笔</li>
    <li>钢笔</li>
</ul>
</body>
</html>